import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:baseProjectFlutter/base/mvvm/base_state.dart';
import 'package:baseProjectFlutter/config/i18n/i18n.dart';
import 'package:baseProjectFlutter/config/i18n/i18n_key.dart';
import 'package:baseProjectFlutter/config/theme.dart';
import 'package:baseProjectFlutter/page/vm/root_vm.dart';
import 'package:baseProjectFlutter/utils/app_common_live.dart';
import 'package:baseProjectFlutter/utils/common/window_config.dart';
import 'package:baseProjectFlutter/widgets_common/image/svg_widget.dart';

import '../../base/mvvm/base_mvvm_state.dart';
import '../../config/app_colors.dart';
import '../../generated/assets.dart';
import 'home_page.dart';

enum RootPageType {
  HOME(0),
  MOTOR(1),
  HMI(2),
  BATTERY(3),
  VBOX(4);

  final int id;

  const RootPageType(this.id);
}

/// 主面板
class RootPage extends BasePage {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageIndex {
  final Widget widget;
  final int index;
  final RootPageType type;
  final String icon;
  final String titleId;

  _RootPageIndex(this.widget, this.index, this.type, this.icon, this.titleId);
}

class _RootPageState extends BaseMvvmState<RootPage, RootVm> {
  _RootPageState() : super(RootVm());
  RootPageType currentTab = RootPageType.HOME;

  final List<_RootPageIndex> _pages = [
    _RootPageIndex(const HomePage(), 0, RootPageType.HOME, Assets.svgMainIcHome, I18nKey.home),
    _RootPageIndex(const HomePage(), 1, RootPageType.MOTOR, Assets.svgMainIcMotor, I18nKey.motor),
    _RootPageIndex(const HomePage(), 2, RootPageType.HMI, Assets.svgMainIcHmi, I18nKey.HMI),
    _RootPageIndex(const HomePage(), 3, RootPageType.BATTERY, Assets.svgMainIcBattery, I18nKey.Battery),
    _RootPageIndex(const HomePage(), 4, RootPageType.VBOX, Assets.svgMainIcVbox, I18nKey.VBox),
  ];
  final _pageController = PageController(initialPage: 0);

  final TextStyle _selectedLabelStyle = const TextStyle(
    fontSize: 11.0,
    fontWeight: FontWeight.w500,
  );
  final TextStyle _unselectedLabelStyle = const TextStyle(
    fontSize: 11.0,
    fontWeight: FontWeight.w400,
  );

  @override
  void initState() {
    super.initState();
    AppLiveData.homeTab.post(currentTab);
    //监听app生命周期
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  Color get backgroundColor => Colors.transparent;

  @override
  PreferredSizeWidget? createAppbar() {
    return null;
  }

  @override
  Widget buildWidget(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: AppColors.page_background,
        ),
        child: Stack(
          children: [
            Row(
              children: [
                //左边导航区域
                _buildLeftMenu(),
                // 内容区域
                Expanded(
                  child: Column(
                    children: [
                      //下面区域
                      Expanded(
                          child: Container(
                        margin: const EdgeInsets.only(top: 10, left: 10),
                        decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: appColors.homeMenuBg),
                        child: IndexedStack(
                          index: _pages.firstWhere((it) => it.type == currentTab).index,
                          children: _pages.map((it) => it.widget).toList(),
                        ),
                      ))
                    ],
                  ),
                )
              ],
            ),
            // 可拖动区域
            const DragAreaPositioned(),
          ],
        ),
      ),
    );
  }

  NavigationRailDestination createMenuItem(String title, String icon) {
    return NavigationRailDestination(
      icon: Builder(builder: (context) {
        return SvgWidget(icon, width: 24, height: 24);
      }),
      label: Text(title),
    );
  }

  // 左侧菜单
  Widget _buildLeftMenu() {
    return Container(
      width: 220,
      // margin: const EdgeInsets.only(left: 10, top: 10, bottom: 10),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: appColors.homeMenuBg),
      // decoration: BoxDecoration(border: Border.all(color: Colors.black12)),
      child: Column(
        children: [
          const SizedBox(height: 20),
          SizedBox(width: double.infinity, height: 30, child: SvgWidget(Assets.svgMainIcLogoText)),
          // Text(
          //   'VinkaService',
          //   // style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
          //   style: theme.textTheme.headlineLarge!.copyWith(fontWeight: FontWeight.bold),
          //   textAlign: TextAlign.center,
          // ),
          const SizedBox(height: 20),
          for (var p in _pages) _buildCustomDestination(p.titleId.trx, p.icon, p.type),
        ],
      ),
    );
  }

  /// 自定义菜单项
  Widget _buildCustomDestination(String label, String icon, RootPageType type) {
    final isSelect = currentTab == type;
    final color = currentTab == type ? appColors.homeMenuSelect : appColors.text;
    final iconColor = currentTab == type ? Colors.white : appColors.text;
    return InkWell(
      onTap: () {
        setState(() {
          AppLiveData.homeTab.post(type);
          currentTab = type;
        });
      },
      child: Container(
        width: double.infinity,
        height: 48,
        // padding: const EdgeInsets.symmetric(vertical: 16),
        decoration: BoxDecoration(
          color: isSelect ? color : Colors.transparent,
          borderRadius: BorderRadius.circular(24),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox.fromSize(size: const Size(24, 0)),
            SizedBox(
              width: 24,
              height: 24,
              child: SvgWidget(
                icon,
                colorFilter: iconColor.toColorFilter(),
              ),
            ),
            SizedBox.fromSize(size: const Size(16, 0)),
            Text(
              label,
              style: TextStyle(
                fontSize: 18,
                color: iconColor,
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }
}
